<template>
  <div class="list-wrap">
    <div v-for="(item, index) in arr" :key="index">
      <div class="comtitle">{{ index }}</div>
      <div href="" class="link-item" v-for="(item, i) in item" :key="i">
        <router-link :to="'/item/' + item.id">
          <div class="main-block">
            <div class="avatar">
              <div class="img-bg"><img :src="item.img" alt="" /></div>
            </div>
            <div class="content-wrap">
              <div class="column-content">
                <div class="movie-title-wrap">
                  <div class="movie-title">{{ item.nm }}</div>
                  <span
                    class="imax"
                    v-if="item.ver && item.ver[5] == '2'"
                  ></span>
                  <span
                    class="imax1"
                    v-if="item.ver && item.ver[5] == '3'"
                  ></span>
                </div>
                <div class="detail-column">
                  <div
                    class="score-line"
                    v-if="item.sc === 0 && item.preShow === false"
                  >
                    <span class="person">{{ item.wish }}</span>
                    <span class="p-suffix">人想看</span>
                  </div>
                  <div
                    class="score-line"
                    v-if="item.sc === 0 && item.preShow === true"
                  >
                    <span class="score-suffix">暂无评分</span>
                  </div>
                  <div class="actor">{{ item.desc || item.star }}</div>
                  <span class="show-info" v-if="item.showInfo">{{
                    item.showInfo
                  }}</span>
                  <span class="show-info" v-else>{{ item.rt }}上映</span>
                </div>
              </div>
              <div class="btn" v-if="item.preShow === true">购票</div>
              <div class="presale" v-else>预售</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Preshow",
  data() {
    return {
      arr: {},
    };
  },
  async created() {
    let res = await this.$axios.get("./json/daiying2.json");
    let arr = res.data.coming;
    arr.forEach((item) => {
      item.img = item.img.replace("w.h", "65.90");
    });
    let day = {};
    arr.forEach((item) => {
      if (day[item.comingTitle]) {
        day[item.comingTitle].push(item);
      } else {
        day[item.comingTitle] = [];
        day[item.comingTitle].push(item);
      }
    });
    this.arr = day;
  },
};
</script>

<style scoped>
.list-wrap {
  width: 10rem;
  height: auto;
  overflow-x: hidden;
}
a {
  text-decoration: none;
}

.link-item {
  width: 10rem;
  height: 114px;
  padding-left: 15px;
  display: inline-block;
}

.main-block {
  width: 9.6rem;
  height: 114px;
  display: flex;
}
.comtitle {
  width: 10rem;
  height: 0.8rem;
  font-size: 14px;
  line-height: 0.8rem;
  margin-left: 0.3733rem;
}
.avatar {
  width: 1.7067rem;
  height: 95px;
  display: inline-block;
}

.img-bg {
  width: 1.7067rem;
  height: 90px;
}

.img-bg img {
  width: 100%;
}

.content-wrap {
  width: 7.7333rem;
  height: 90px;
  padding: 1px 14px 12px 0px;
  margin-left: 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
}

.column-content {
  width: 5.9733rem;
  height: 88px;
}

.movie-title-wrap {
  width: 5.84rem;
  height: 24px;
  margin-bottom: 2px;
  overflow: hidden;
}

.movie-title {
  height: 24px;
  display: inline-block;
  color: #333;
  font-size: 17px;
  font-weight: 700;
}

.imax {
  width: 1.1467rem;
  height: 14px;
  display: inline-block;
  background: url(../assets/img/2d.png) no-repeat;
  background-size: contain;
}

.imax1 {
  width: 1.1467rem;
  height: 14px;
  display: inline-block;
  background: url(../assets/img/3dmax.png) no-repeat;
  background-size: contain;
}

.detail-column {
  width: 5.84rem;
  height: 57px;
  display: inline-block;
}

.score-line {
  width: 5.84rem;
  height: 15px;
}

.score-line span:first-child {
  font-size: 13px;
  color: #666;
}

.score-line span:nth-child(2),
.detail-column .score-line .person {
  font-size: 15px;
  color: #faaf00;
  font-weight: 600;
}

.actor,
.show-info,
.detail-column .score-line .p-suffix {
  font-size: 13px;
  color: #666;
}

.actor {
  width: 5.84rem;
  height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-bottom: 5px;
}

.btn {
  width: 1.44rem;
  height: 28px;
  background-color: #f03d37;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.presale {
  width: 1.44rem;
  height: 28px;
  background-color: rgb(60, 159, 230);
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.wishs {
  position: absolute;
  bottom: 30px;
  color: #faaf00;
  font-size: 12px;
  font-weight: 700;
}
</style>